<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-lg">
      <div class="text-center">
        <h2 class="text-3xl font-bold text-gray-900">AnyPay 商户后台</h2>
        <p class="mt-2 text-sm text-gray-600">请登录您的账号</p>
      </div>
      <a-form
        :model="formState"
        name="login"
        @finish="onFinish"
        class="mt-8 space-y-6"
      >
        <a-form-item
          name="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input
            v-model:value="formState.username"
            size="large"
            placeholder="用户名"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="password"
          :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input-password
            v-model:value="formState.password"
            size="large"
            placeholder="密码"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item
          name="captcha"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <div class="flex space-x-4">
            <a-input
              v-model:value="formState.captcha"
              size="large"
              placeholder="验证码"
            >
              <template #prefix>
                <SafetyOutlined />
              </template>
            </a-input>
            <img
              :src="captchaUrl"
              alt="验证码"
              class="h-10 cursor-pointer"
              @click="refreshCaptcha"
            />
          </div>
        </a-form-item>

        <div class="flex items-center justify-between">
          <a-checkbox v-model:checked="formState.remember">
            记住我
          </a-checkbox>
          <a class="text-sm text-blue-600 hover:text-blue-500">
            忘记密码？
          </a>
        </div>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            :loading="loading"
            class="w-full"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  UserOutlined,
  LockOutlined,
  SafetyOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const loading = ref(false)

const formState = reactive({
  username: '',
  password: '',
  captcha: '',
  remember: false
})

const captchaUrl = ref('/api/captcha')

const refreshCaptcha = () => {
  captchaUrl.value = `/api/captcha?t=${Date.now()}`
}

const onFinish = async (values: any) => {
  try {
    loading.value = true
    // TODO: 实现登录逻辑
    console.log('登录表单数据:', values)

    // 模拟登录成功
    localStorage.setItem('token', 'dummy-token')
    message.success('登录成功')

    // 跳转到之前的页面或首页
    const redirect = route.query.redirect as string
    router.push(redirect || '/')
  } catch (error) {
    console.error('登录失败:', error)
    message.error('登录失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>